<template>
  <div class="h-full">
    <DefaultList v-bind="listConfig">
      <template #operate="{ row }">
        <el-button link type="warning" @click="onResetPassword(row)" :disabled="dialog">
          重置密码
        </el-button>
      </template>
    </DefaultList>

    <el-dialog v-model="dialog" title="重置密码" width="600" append-to-body>
      <DefaultForm v-bind="dialogForm" @submit="onResetPasswordSubmit" :loading="loading" />
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import DefaultList from '@/components/lists/DefaultList.vue'
import useHttp from '@/hooks/useHttp'
import { ElNotification } from 'element-plus'

const listConfig: TableGlobalType = {
  id: 'user-list',
  tableKey: 'id',
  table: {
    data: [],
    attrs: {
      stripe: true,
      border: true,
      'default-sort': {
        prop: 'date',
        order: 'ascending'
      }
    }
  },
  columns: [
    {
      id: '_index',
      attrs: {
        label: '#',
        type: 'index'
      }
    },
    {
      id: 'avatar',
      'slot-default': 'picture',
      attrs: {
        label: '头像',
        prop: 'avatar',
        width: '100px'
      }
    },
    {
      id: 'username',
      attrs: {
        label: '用户名',
        prop: 'username',
        'show-overflow-tooltip': true,
        width: '100px'
      }
    },
    {
      id: 'phone',
      attrs: {
        label: '手机号',
        prop: 'phone',
        width: '120px'
      }
    },
    {
      id: 'email',
      attrs: {
        label: '邮箱',
        prop: 'email',
        'show-overflow-tooltip': true,
        width: '100px'
      }
    }
  ],
  pagination: {
    'current-page': 1,
    'page-size': 30,
    total: 0,
    attrs: {
      background: true,
      layout: 'total, sizes, prev, pager, next, jumper'
    }
  },
  search: {
    id: 'user-list-search-form',
    submitText: '查询',
    submitStyle: {
      'justify-self': 'end'
    },
    resetText: '重置',
    form: {
      action: '/user',
      method: 'get',
      model: {
        keywords: ''
      },
      attrs: {
        inline: true,
        style: {
          'grid-template-areas': `
                            "keywords . form-submit"
                        `
        }
      }
    },
    fields: [
      {
        'field-type': 'input',
        'field-label': '',
        id: 'keywords',
        model: 'keywords',
        attrs: {
          placeholder: '请输入关键字搜索'
        },
        'grid-area': 'keywords'
      }
    ]
  },
  detail: {
    form: {
      id: 'user-detail-form',
      submitText: '详情',
      form: {
        action: '/user/$1',
        method: 'get',
        model: {},
        attrs: {}
      },
      fields: []
    },
    info: {
      id: 'user-detail',
      detail: {
        model: {},
        'descriptions-attrs': {
          border: true,
          column: 2
        },
        attrs: {}
      },
      fields: [
        {
          id: 'username',
          'field-type': 'text',
          'field-label': '用户名',
          model: 'username',
          'descriptions-item-attrs': {},
          attrs: {}
        },
        {
          id: 'avatar',
          'field-type': 'avatar',
          'field-label': '头像',
          model: 'avatar',
          'descriptions-item-attrs': {},
          attrs: {}
        },
        {
          id: 'phone',
          'field-type': 'text',
          'field-label': '手机号码',
          model: 'phone',
          'descriptions-item-attrs': {},
          attrs: {}
        },
        {
          id: 'email',
          'field-type': 'text',
          'field-label': '邮箱',
          model: 'email',
          'descriptions-item-attrs': {
            span: 2
          },
          attrs: {}
        }
      ]
    }
  },
  add: {
    id: 'user-add-form',
    submitText: '新增',
    submitStyle: {
      'justify-self': 'end'
    },
    form: {
      action: '/user',
      method: 'post',
      model: {
        username: '',
        password: '',
        email: '',
        phone: '',
        avatarId: null,
        roles: [],
        permissions: []
      },
      attrs: {
        'label-width': 80,
        style: {
          gap: '10px',
          'grid-template-areas': `
                            "username password"
                            "email phone"
                            "roles ."
                            "permissions permissions"
                            "avatar avatar"
                            ". form-submit"
                        `
        }
      }
    },
    fields: [
      {
        'field-type': 'input',
        'field-label': '用户名',
        id: 'username',
        model: 'username',
        attrs: {},
        'grid-area': 'username'
      },
      {
        'field-type': 'input',
        'field-label': '密码',
        id: 'password',
        model: 'password',
        attrs: {
          type: 'password'
        },
        'grid-area': 'password'
      },
      {
        'field-type': 'input',
        'field-label': '邮箱',
        id: 'email',
        model: 'email',
        attrs: {},
        'grid-area': 'email'
      },
      {
        'field-type': 'input',
        'field-label': '电话',
        id: 'phone',
        model: 'phone',
        attrs: {},
        'grid-area': 'phone'
      },
      {
        'field-type': 'remote-object-select',
        'field-label': '角色',
        id: 'roles',
        model: 'roles',
        attrs: {
          optionLabel: 'name',
          optionValue: 'id',
          remote: {
            action: '/role/all',
            method: 'get',
            model: {},
            attrs: {}
          },
          selectAttrs: {
            multiple: true,
            filterable: true
          }
        },
        'grid-area': 'roles'
      },
      {
        'field-type': 'remote-object-transfer',
        'field-label': '权限',
        id: 'permissions',
        model: 'permissions',
        attrs: {
          optionLabel: 'name',
          optionValue: 'id',
          remote: {
            action: '/permission/all',
            method: 'get',
            model: {},
            attrs: {}
          },
          transferAttrs: {
            filterable: true,
            'filter-placeholder': '搜索权限名称'
          }
        },
        'grid-area': 'permissions'
      },
      {
        'field-type': 'image-upload',
        'field-label': '头像',
        id: 'avatar',
        model: 'avatarId',
        attrs: {
          action: `${import.meta.env.VITE_API_BASE_URL}/file/upload-image`
        },
        'grid-area': 'avatar'
      }
    ]
  },
  edit: {
    id: 'user-edit-form',
    submitText: '编辑',
    submitStyle: {
      'justify-self': 'end'
    },
    form: {
      action: '/user/$1',
      method: 'patch',
      model: {},
      attrs: {
        'label-width': 80,
        style: {
          gap: '10px',
          'grid-template-areas': `
                            "username phone"
                            "email roles"
                            "permissions permissions"
                            "avatar avatar"
                            ". form-submit"
                        `
        }
      }
    },
    fields: [
      {
        'field-type': 'input',
        'field-label': '用户名',
        id: 'username',
        model: 'username',
        attrs: {
          disabled: true
        },
        'grid-area': 'username'
      },
      {
        'field-type': 'input',
        'field-label': '邮箱',
        id: 'email',
        model: 'email',
        attrs: {},
        'grid-area': 'email'
      },
      {
        'field-type': 'input',
        'field-label': '电话',
        id: 'phone',
        model: 'phone',
        attrs: {},
        'grid-area': 'phone'
      },
      {
        'field-type': 'remote-object-select',
        'field-label': '角色',
        id: 'roles',
        model: 'roles',
        attrs: {
          optionLabel: 'name',
          optionValue: 'id',
          remote: {
            action: '/role/all',
            method: 'get',
            model: {},
            attrs: {}
          },
          selectAttrs: {
            multiple: true,
            filterable: true
          }
        },
        'grid-area': 'roles'
      },
      {
        'field-type': 'remote-object-transfer',
        'field-label': '权限',
        id: 'permissions',
        model: 'permissions',
        attrs: {
          optionLabel: 'name',
          optionValue: 'id',
          remote: {
            action: '/permission/all',
            method: 'get',
            model: {},
            attrs: {}
          },
          transferAttrs: {
            filterable: true,
            'filter-placeholder': '搜索权限名称'
          }
        },
        'grid-area': 'permissions'
      },
      {
        'field-type': 'image-upload',
        'field-label': '头像',
        id: 'avatar',
        model: 'avatarId',
        attrs: {
          action: `${import.meta.env.VITE_API_BASE_URL}/file/upload-image`,
          imageModel: 'avatar'
        },
        'grid-area': 'avatar'
      }
    ]
  },
  remove: {
    id: 'user-remove-form',
    submitText: '删除',
    form: {
      action: '/user/$1',
      method: 'delete',
      model: {},
      attrs: {}
    },
    fields: []
  },
  deleteImage: {
    action: `${import.meta.env.VITE_API_BASE_URL}/file/remove-by-url`,
    method: 'post',
    fieldname: 'urls'
  }
}

const dialog = ref(false)
const dialogForm: FormGlobalType = {
  id: 'reset-password',
  submitText: '重置',
  submitStyle: {
    'justify-self': 'end'
  },
  form: {
    action: '/user/reset-password',
    method: 'post',
    model: {
      password: ''
    },
    attrs: {
      'label-width': 80,
      style: {
        gap: '10px',
        'grid-template-areas': `
                            "password password"
                            ". form-submit"
                        `
      }
    }
  },
  fields: [
    {
      'field-type': 'input',
      'field-label': '新密码',
      id: 'password',
      model: 'password',
      attrs: {
        type: 'password',
        placeholder: '请输入新密码'
      },
      'grid-area': 'password'
    }
  ]
}
const { data, request, loading } = useHttp<ApiResponseData>()
const onResetPassword = (row: { id: string }) => {
  dialogForm.form.model.id = row.id
  dialog.value = true
}

const onResetPasswordSubmit = async (params: Record<string, any>) => {
  await request(dialogForm.form.action, params, {
    method: dialogForm.form.method
  })

  if (data.value?.status) {
    ElNotification.success({
      title: '提示',
      message: '重置密码成功'
    })
    dialog.value = false
  }
}
</script>

<style scoped lang="scss"></style>
